<template>
  <div class="supplement">
    <navBar :title="top" @onClickLeft="onClickLeft" />
    <div class="supplement-form">
      <van-form validate-first>
        <van-field  class="van-field-isRequired" name="file" :label="status" :rules="[{ required: true, message: '请选择签字文件' }]">
          <template #input>
            <van-uploader
              accept="image/*,.pdf"
              upload-icon="todo-list-o"
              v-model="fileList"
              :after-read="afterRead"
              :max-count="1"
            />
          </template>
        </van-field>
      </van-form>
    </div>
    <div class="supplement-btn">
      <van-button round block type="info" native-type="submit" @click="onSubmit">提交</van-button>
    </div>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import config from '../../../../public/config'
import axios from "axios";
import {get} from '../../../../public/API/query';
import { Dialog, Toast } from "vant";
export default {
  components: {
    navBar,
  },
  data() {
    return {
      form: {},
      fileList: [],
      params:{},
      id: null,
      wh:"",
      top:'',
      status:''
    };
  },
  watch: {},
  created() {
    this.id = this.$route.query && this.$route.query.id;
    this.wh = this.$route.query && this.$route.query.wh;
    if(this.wh=='qz'){
      this.top='上传签字文件'
      this.status = '签字文件'
    }else{
      this.top='上传oa截图'
      this.status = 'oa截图'
    }
  },
  deactivated() {
        this.$destroy(true); //销毁组件
  },
  methods: {
    afterRead(file,detail){
      file.status = "uploading";
      let upfile = new FormData();
      upfile.append("file", file.file);
      var configs = { onUploadProgress: (progressEvent) => {
        var schedule = ((progressEvent.loaded / progressEvent.total) * 100) |0;file.message = schedule + "%";},timeout: 60000};
        axios.post(config.get('e_url')+'v1000_upload',upfile)
        .then((res) => {
          res.data.code == 200 ? (file.status = "success") : (file.status = "failed");
          switch (this.wh) {
          case 'qz':
              this.params.signFile = res.data.data;
              break;
          case 'oa':
              this.params.oaFile = res.data.data;
              break;
          default:
              break;
        }
        });
    },
    submitPost() {
      if (this.params) {
        this.params.id = this.id;
        let url = '';
        this.wh == 'qz'?url = 'upSignFile':url = 'upOsFile';
        get(url,this.params, res => {
          if (res.code === 200) {
            Toast.success("上传成功！");
            this.$router.push({
              path: `/replace/details`,
              query: {
                id:this.id,
              },
            });
          }
        });
      }else{
        Toast.success(`请上传${this.status}！`);
      }  
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      if (!this.fileList.length) {
        Toast.fail("请先上传文件");
        return;
      }
      this.submitPost();
    },
  },
};
</script>

<style lang='less'>
.supplement {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  &-form {
    margin-top: 20px;
    .van-cell {
      margin-bottom: 15px;
    }
  }
  .van-submit-bar {
    bottom: 20px;
  }
  &-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    position: fixed;
    bottom: 20px;
  }
}
</style>